<template>
  <div class="headermain">
    <!-- <Slider :value.sync="value" range></Slider> -->
    <div class="tittlelogo"> 
      <div>LOGO img</div>
    </div>
    <ul class="tittlelist">
      <li v-for="item in tittleitem" @click="gonext(item)" @mouseover="overShow(item.key)" @mouseout="outHide">{{item.name}}</li>
    </ul>
    <div class="Titleshow">
      <div v-show="item.key==Titlekey" v-for="item in tittleitem">{{item}}</div>
    </div>
    <!-- <div>
      <span>用户名</span>
      <span>退出</span>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'headerview',
  data () {
      return {
          value: [20, 50],
          tittleitem:[{
            name:"菜单一",
            path:"/a1",
            key:"a1"
          },{
            name:"菜单二",
            path:"/a2",
            key:"a2"
          },
          {            
            name:"菜单三",
            path:"/a1",
            key:"a3",
          }],
          Titlekey:"",
      }
  },
  mounted(){
    console.log(this.$router)
  },
  methods: {
      change (status) {
          this.$Message.info('开关状态：' + status);
      },
      gonext(item){
        console.log(item);
      },
      overShow(key){
        // this.Titlekey=key;
      },
      outHide(){
        this.Titlekey="";
      }
  },
  props:{
    getdata:{
      default:"000"
    }
  },
  watch:{

  }
}
</script>

<style scoped>
.headermain{
  border:1px solid #ddd;
  overflow: hidden;
  /* padding: 20px 10px; */
  font-size: 20px;
      height: 70px;
    line-height: 65px;
}
.Titleshow{
    position: absolute;
    top: 120px;
    right: 0;
    width: 100%;
}
.tittlelogo{
  float: left;
  margin-left: 50px;
  font-size: 30px;
  font-weight: 800;
  color: red;
}
.tittlelist{
  float: right;
  margin-right: 50px;
}
.tittlelist>li{
  border-right:1px solid red;
  padding: 5px 10px;
  cursor: pointer;
}
.tittlelist>li:hover{
  background: green;
  color: red;
}
.tittlelist li:last-child{
  border-right:none;
}
</style>
